<div cdkDropListGroup>
  <div class="example-container">
    <h2>Available items</h2>

    <div
      cdkDropList
      [cdkDropListData]="items"
      class="example-list"
      cdkDropListSortingDisabled
      (cdkDropListDropped)="drop($event)">
      @for (item of items; track item) {
        <div class="example-box" cdkDrag>{{item}}</div>
      }
    </div>
  </div>

  <div class="example-container">
    <h2>Shopping basket</h2>

    <div
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      @for (item of basket; track item) {
        <div class="example-box" cdkDrag>{{item}}</div>
      }
    </div>
  </div>
</div>
